<template>
  <div style="text-align: center">
    <div class="cover"></div>
    <h1 style="color: green;margin-top: 100px">注册界面</h1>
    <div style="text-align: center">
        <Card class="login_contain">
          <div>
            <label>姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名：</label>
            <Input v-model="login_name" placeholder="请输入用户名" class="inputwidth"/>
          </div>
          <div style="margin-top: 16px">
            <label>密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码：</label>
            <Input v-model="login_psw" placeholder="请输入密码" class="inputwidth" type="password"/>
          </div>

          <div style="margin-top: 16px">
            <label>确认密码：</label>
            <Input v-model="psw_confirm" placeholder="请输入密码" class="inputwidth" type="password"/>
          </div>
          <Button type="success" long class="btnlogin" @click="btn_register">注册</Button>
          <div style="margin-top: 10px" @click="back">
            <Icon type="ios-arrow-dropleft"></Icon>
            <span>返回</span>
          </div>
        </Card>
    </div>

  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        login_name: "",
        login_psw: "",
        psw_confirm: ''
      }
    },
    methods: {
      btn_register() {
        var vm = this
        if (this.psw_confirm == "" || this.login_psw == "" || this.login_name == "") {
          this.$Message.info('请将信息填写完整');
          return
        }
        if (this.psw_confirm != this.login_psw) {
          this.$Message.error("两次密码不一致")
          return
        }

        this.$http.post('/v1/users/register',
          {
            username: this.login_name,
            password: this.login_psw,
            cpassword: this.psw_confirm
          }
        ).then(function (response) {
          if (response.data.code === 1003) {
            vm.$Message.error('用户已存在')
            vm.$router.push({
              name: "login",
              params: {"userName": vm.login_name}
            })
          } else {
            if (response.data.code === 1000) {
              vm.$Message.success('注册成功')
              vm.$router.push({
                name: "login",
                params: {userName: vm.login_name}
              })
            } else {
              vm.$Message.error(response.data.message)
            }
          }
        }).catch(function (e) {
          console.log(e.data)
        })
      },
      back() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
  .login_contain {
    margin-top: 60px;
    background-color: white;
    padding: 40px 40px 4px 40px;
    display: inline-block;
  }

  .btnlogin {
    margin-top: 20px;
    width: 240px;
  }

  .inputwidth {
    width: 200px;
  }
</style>
